<!--
  描述：拖放地图组件，默认尺寸是 500 * 300

  接收属性参数：
    lat: 纬度
    lng: 经度

  自定义事件：
    drag: 拖放完成事件

  示例：
    <mapDrag @drag="dragMap" lat="22.574405" lng="114.095388"></mapDrag>
-->
<template>
  <div class="m-map">
    <div class="search">
      <el-form @submit.native.prevent>
        <input
          :id="search_id"
          v-model="input"
          type="text"
          placeholder="请输入关键字"
          autocomplete="off"
        >
        <input type="text" style="display: none">
        <button type="primary" @click="searchMap">搜索</button>
      </el-form>
      <div v-show="searchKey" id="js-result" class="result" />
    </div>
    <!-- <div id="panel" /> -->
    <!-- 搜索结果栏 -->
    <div v-if="showsearchResult" class="tool_search_result">
      <ul>
        <li
          v-for="(item, index) in poiList"
          :key="index"
          @click="markerResult(item)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div id="js-container" class="map">正在加载数据 ...</div>
  </div>
</template>

<script>
// import remoteLoad from '@/utils/remoteLoad.js'
import bus from '@/eventBus/eventBus.js'
import { MapKey, securityJsCode } from '@/api/config'
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
  props: {
    lat: {
      type: String,
      default: ''
    },
    lng: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      autoOptions: {
        input: ''
      },
      showsearchResult: false,
      search_id: 'searchId',
      input: '',
      searchPlaceInput: '',
      searchKey: '',
      placeSearch: null,
      dragStatus: false,
      AMapUI: null,
      AMap: null,
      positionImage: require('@/icons/png/position.png'),
      marker: {},
      map: null,
      poiList: []
    }
  },
  watch: {
    searchPlaceInput(newValue) {
      if (newValue != null) {
        // this.placeSearch.search(newValue)
      }
    }
  },
  created() {
    bus.$on('share_id', val => {
      this.autoOptions.input = val
    })
    bus.$on('share', val => {
      this.searchPlaceInput = val
    })
  },
  mounted() {
    this.initMap()
    this.sendId()
  },
  methods: {
    sendMsg() {
      bus.$emit('share', this.input)
    },
    sendId() {
      bus.$emit('share_id', this.search_id)
    },
    // 实例化地图
    initMap() {
      window._AMapSecurityConfig = { securityJsCode }
      AMapLoader.load({
        key: MapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.ToolBar', 'AMap.Geocoder', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.MapType', 'AMap.HawkEye', 'AMap.Scale', 'AMap.AutoComplete'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.map = new AMap.Map('js-container', { // 设置地图容器id
          viewMode: '3D', // 是否为3D地图模式
          zoom: 11, // 初始化地图级别
          center: [117.279952, 31.850109] // 初始化地图中心点位置
        })
        this.map.addControl(new AMap.ToolBar())
        this.mapOn(AMap)
      }).catch(e => {
        console.log(e)
      })
    },
    searchMap() {
      var placeSearch = new AMap.PlaceSearch({
        // 构造地点查询类
        pageSize: 3, // 单页显示结果条数
        pageIndex: 1, // 页码
        citylimit: true, // 是否强制限制在设置的城市内搜索
        map: this.map, // 展现结果的地图实例
        // panel: 'panel', // 结果列表将在此容器中进行展示。
        autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
      })
      // 关键字查询
      const cur = this
      placeSearch.search(this.input, (status, result) => {
        // 查询成功时，result即对应匹配的POI信息
        console.log(status)
        console.log(result)
        if (status === 'complete' && result.info === 'OK') {
          cur.showsearchResult = true
          cur.poiList = result.poiList.pois
        } else {
          cur.showsearchResult = false
          cur.poiList = []
          cur.$message({
            message: '没有查到结果',
            type: 'warning'
          })
        }
      })
    },
    markerResult(data) {
      // this.input = data.name
      // this.searchMap()
      const that = this
      const { lat, lng } = data.location
      window._AMapSecurityConfig = { securityJsCode }
      AMapLoader.load({
        key: MapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.ToolBar', 'AMap.Geocoder', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.MapType', 'AMap.HawkEye', 'AMap.Scale', 'AMap.AutoComplete'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.map = new AMap.Map('js-container', { // 设置地图容器id
          viewMode: '3D', // 是否为3D地图模式
          zoom: 18, // 初始化地图级别
          center: [lng, lat] // 初始化地图中心点位置
        })
        this.map.addControl(new AMap.ToolBar())
        const address = data.name
        const marker = new AMap.Marker({
          position: new AMap.LngLat(lng, lat),
          icon: that.positionImage,
          anchor: 'bottom-center'
        })
        // map.remove(that.marker)
        this.map.add(marker)
        that.marker = marker
        that.showsearchResult = false
        that.$emit('center', { lnglat: lng + ',' + lat, address })
        this.mapOn(AMap)
      }).catch(e => {
        console.log(e)
      })
      // var marker = new AMap.Marker({
      //   position: [Number(data.location.lng), Number(data.location.lat)],
      //   cursor: 'pointer',
      //   // icon: carIcon,
      //   autoRotation: true,
      //   angle: 0,
      //   offset: new AMap.Pixel(-36, -30),
      // })
      // marker.setMap(this.mapall)
      // this.mapall.setFitView();
    },
    // 地图事件监听
    mapOn(AMap) {
      const { map } = this
      const that = this
      const geocoder = new AMap.Geocoder()
      let address = ''
      // 监听地图点击事件
      map.on('click', function (e) {
        // 获取点击位置坐标
        const { lat, lng } = e.lnglat
        // 设置标记点
        const marker = new AMap.Marker({
          position: new AMap.LngLat(lng, lat),
          icon: that.positionImage,
          anchor: 'bottom-center'
        })
        map.remove(that.marker)
        map.add(marker)
        that.marker = marker
        geocoder.getAddress([lng, lat], function (status, result) {
          address = result.regeocode.formattedAddress
          that.showsearchResult = false
          that.$emit('center', { lnglat: lng + ',' + lat, address })
        })
      })
    }
  }
}
</script>

<style lang="css">
.m-map {
  min-width: 500px;
  min-height: 300px;
  position: relative;
}
.m-map .map {
  width: 100%;
  height: 100%;
}
.m-map .search {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 285px;
  z-index: 1;
}
.m-map .search input {
  width: 220px;
  border: 1px solid #ccc;
  height: 30px;
  box-sizing: border-box;
  line-height: 20px;
  padding: 5px;
  outline: none;
}
.m-map .search button {
  line-height: 26px;
  background: #fff;
  border: 1px solid #ccc;
  width: 50px;
  text-align: center;
}
.m-map .result {
  max-height: 300px;
  overflow: auto;
  margin-top: 10px;
}
#panel {
  position: absolute;
  top: 50px;
  left: 10px;
  width: 270px;
  z-index: 1;
}
.tool_search_result {
  position: absolute;
  top: 40px;
  left: 10px;
  width: 270px;
  z-index: 1;
  border: 1px solid rgb(175, 175, 173);
  border-top: none;
  background: #fff;
  opacity: 0.8;
  bottom: auto;
  z-index: 12;
  position: absolute;
  text-align: left;
  font-size: 14px;
}
.tool_search_result ul {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tool_search_result ul li {
  font-size: 12px;
  cursor: pointer;
  color: rgb(23, 40, 75);
  text-align: center;
  width: 100%;
  line-height: 2;
  padding: 5px 10px;
  box-sizing: border-box;
  border-bottom: 1px dashed rgb(170, 170, 172);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tool_search_result ul li:last-child {
  border: none;
}
</style>
